import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { MessageService, TreeComponent, TreeNode } from '@iux/live';

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
  styles: [
    `
      .tree-container {
        box-sizing: content-box;
        width: 360px;
        padding: 16px;
        border: 1px solid #e6e6e6;
      }
      .selection {
        margin-bottom: 0.08rem;
        font-size: 0.16rem;
        line-height: 0.24rem;
      }
      .selection span:nth-of-type(n + 1) {
        padding-right: 0.08rem;
      }
      ::ng-deep .ui-customer-tree .lv-treenode-content {
        padding: 0;
      }
      .ui-tree-node-item {
        display: flex;
        justify-content: space-between;
        line-height: 32px;
        padding: 0 8px;
      }
      .ui-tree-node-item-checked {
        background: rgba(38, 115, 229, 0.06);
        color: #2673e5;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EventComponent {
  data: TreeNode[] = [
    {
      label: 'root node 1',
      disabled: true,
      expanded: true,
      children: [
        {
          label: 'child node 1-1 long long long long long long long long long long long long name.doc',
          expanded: true,
          children: [
            { label: 'leaf node 1-1-1', isLeaf: true },
            { label: 'leaf node 1-1-2', isLeaf: true },
          ],
        },
        {
          label: 'child node 1-2',
          children: [
            { label: 'leaf node 1-2-1', isLeaf: true },
            { label: 'leaf node 1-2-2', isLeaf: true },
          ],
        },
      ],
    },
    {
      label: 'root node 2',
      children: [
        {
          label: 'leaf node 2-1',
          isLeaf: true,
        },
        {
          label: 'child node 2-2',
          children: [
            { label: 'leaf node 2-2-1', isLeaf: true },
            { label: 'leaf node 2-2-2', isLeaf: true },
          ],
        },
      ],
    },
    {
      label: 'root node 3',
      children: [
        {
          label: 'leaf node 3-1',
          isLeaf: true,
        },
        {
          label: 'leaf node 3-2',
          isLeaf: true,
        },
      ],
    },
  ];
  selection: TreeNode[];

  @ViewChild('tree', { static: true }) treeComponent: TreeComponent;

  constructor(private message: MessageService, private cdr: ChangeDetectorRef) {}

  selectionChange(event) {
    console.log('selection:', event);
  }

  expandedChange(event) {
    console.log('expanded', event);
  }

  check(event) {
    console.log('check', event);
  }

  select(event) {
    console.log('select', event);
  }

  nodeClick(event) {
    console.log('nodeClick', event);

    this.treeComponent.flattenData.forEach(node => {
      node['checked'] = false;
    });

    event.node.checked = true;

    this.message.info(`show this item info: ${event.node.label}`);

    this.cdr.markForCheck();
  }

  clearSelection() {
    this.selection = null;
  }
}
